<template>

  <div lin_about_preview>
    <img src='https://resource.obsbothk.com/DownLoad/Picture/starbucket/cover-01.webp?image_process=resize,fw_800,fh_550' @click="imageClick" class="lin_about_preview_background"></img>
  </div>

</template>

<script setup lang="ts">
import { v3ImgPreviewFn } from 'v3-img-preview'

const imageClick = async(e: MouseEvent) => {
  // 导出方法调用
  v3ImgPreviewFn(
    'https://resource.obsbothk.com/DownLoad/Picture/starbucket/cover-01.webp?image_process=resize,fw_800,fh_550'
  )
}


</script>
<style scoped lang="scss">


.lin_about_preview_background{
  height: 200px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.lin_about_preview_background:hover {
  transition: all 0.3s ease;
  border: 1px solid var(--scheme-red-100);
}

@media screen and (max-width: 790px) {
  .lin_about_preview_background {
    height: 150px;
  }
}


@media screen and (max-width: 650px) {
  .lin_about_preview_background {
    height: 100px;
  }
}

</style>